<template>
  <!-- 采购订单明细 -->
  <div class="table-w">
    <a-table class="table-singe-line show-border-table" :bordered="{ cell: true }" :span-method="spanMethodAll" :data="currentData.billItems" :scroll="{ x: '100%', y: '100%' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="img" title="图片" :width="60" fixed="left">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="产品名称" :width="120" fixed="left">
          <template #cell="{ record }">
            <TextLimit :val="record.productName" :rows="1" />
          </template>
        </a-table-column>
        <a-table-column data-index="sku" title="SKU" :width="120" fixed="left">
          <template #cell="{ record }">
            <ShowSpuDetailBySku :val="record.sku" :showLimit="false" />
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="SKU规格" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column title="店铺专属">
          <a-table-column data-index="shop" title="店铺" :width="140" cell-class="shopInfo">
            <template #cell="{ record }">
              <div class="shop-list" v-for="(item, i) in record.planItems" :key="i">
                <div class="item" style="width: 140px">
                  {{ item.shopName }}
                </div>
                <div class="item" style="width: 100px">
                  <TextLimit :val="item.msku || '--'" :rows="2" style="width: 89px" />
                </div>
                <div class="item" style="width: 60">
                  <p>{{ item.purchaseAmt }}</p>
                </div>
              </div>
            </template>
          </a-table-column>
          <a-table-column title="MSKU" :width="100" />
          <a-table-column title="数量" :width="60" />
        </a-table-column>
        <a-table-column data-index="purchaseAmt" title="采购数量" :width="70" />
        <a-table-column data-index="moq" title="起订量" :width="60" />
        <a-table-column title="预计交期" :width="90">
          <template #cell="{ record }">
            <p>{{ $setTime(record.gmtPlanDelivery, 'YYYY/MM/DD') }}</p>
          </template>
        </a-table-column>
        <a-table-column title="税率" :width="60">
          <template #cell="{ record }">
            <p>{{ record.rate }}%</p>
          </template>
        </a-table-column>
        <a-table-column title="单价" :width="70">
          <template #cell="{ record }">
            <p class="price-type highlight">{{ record.priceType === 1 ? '含税' : '不含税' }}</p>
            <p>￥{{ record.price }}</p>
          </template>
        </a-table-column>
        <a-table-column title="采购金额" :width="80">
          <template #cell="{ record }">
            <p class="price-type highlight">{{ record.priceType === 1 ? '含税' : '不含税' }}</p>
            <p>￥{{ record.purchaseValue }}</p>
          </template>
        </a-table-column>
        <a-table-column title="单件工费" :width="70">
          <template #cell="{ record }">
            <p>￥{{ record.singleLaborCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column title="单件成本" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.unitCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column title="合计成本" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.purchaseCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="purchaseUname" title="采购员" :width="70" />
        <a-table-column title="备注" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="record.remark" />
          </template>
        </a-table-column>
        <a-table-column title="采购计划" :width="100">
          <template #cell="{ record }">
            <p class="highlight">{{ record.purchaseNo }}</p>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { parseJson } from '@/utils'
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  // 合并单元格
  function spanMethodAll(option: any) {
    let { column } = option
    if (column.dataIndex === 'shop') {
      return { rowspan: 1, colspan: 3 }
    }
  }
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>
<style lang="less" scoped>
  .table-w {
    flex: 1;
    overflow: hidden;
  }
  :deep(td.shopInfo .arco-table-cell) {
    padding: 0 !important;
  }
  .shop-list {
    display: flex;
    border-bottom: 1px solid var(--color-neutral-3);
    &:last-child {
      border-bottom: none;
    }
    .item {
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0 5px;
      border-right: 1px solid var(--color-neutral-3);
      &:last-child {
        border-right: none;
      }
    }
  }
  .price-type {
    font-size: 12px;
    transform: scale(0.82);
    position: relative;
    left: -4px;
  }
  :deep(.arco-table-border .arco-table-scroll-y) {
    border-right: 1px solid var(--color-neutral-3);
    .arco-table-td:last-child {
      border-right: 0;
    }
  }
</style>
